<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 收集表单数据</title>
    <script src="js/vue.js"></script>
</head>
<style>
    ul {
        list-style: none;
    }

    li {
        margin-top: 50px;
    }
</style>

<body>
    <div id="root">
        v-model 修饰符 有 <br>
        lazy 失去焦点后触发 <br>
        number 自动转换成数字类型 <br>
        trim 除去两端空格 <br>
        <form action="" method="get" @submit.prevent="infosubmit">
            <ul>
                <li>用户名: <input type="text" v-model.trim="info.name" name="" id=""> </li>
                <li>密码: <input type="password" v-model="info.password" name="" id=""> </li>
                <li>年龄: <input type="text" v-model.number="info.age" name="" id=""> </li>
                <li>性别：
                    男：<input type="radio" v-model="info.sex" name="sex" id="" value="male">
                    女：<input type="radio" v-model="info.sex" name="sex" id="" value="female">
                </li>
                <li>兴趣爱好:
                    足球 <input type="checkbox" v-model="info.hobby" name="hobby" id="" value="football">
                    羽毛球 <input type="checkbox" v-model="info.hobby" name="hobby" id="" value="basketball">
                    篮球 <input type="checkbox" v-model="info.hobby" name="hobby" id="" value="badminton">
                </li>
                <li>个人简介：<textarea name="" v-model.lazy="info.desc"></textarea></li>
                <li>地区：
                    <select name="" v-model="info.area">
                        <option value="nantong">南通</option>
                        <option value="nanjing">南京</option>
                        <option value="shanghai">上海</option>
                    </select>
                </li>
                <li>
                    <button type="submit">提交</button>
                </li>
            </ul>
        </form>
    </div>
</body>
<script>
    new Vue({
        el: "#root",
        data() {
            return {
                info: {
                    name: "",
                    password: "",
                    age: "",
                    sex: "male",
                    hobby: [],
                    desc: "",
                    area: "shanghai"
                }
            }
        },
        methods: {
            infosubmit() {
                //提交表单
                console.log(JSON.stringify(this.info));
            }
        }
    })
</script>

</html>